<!-- BubbleBrands.vue -->
<template>
  <view>
    <view class="money_price-container">
      <view class="money_price-title">这份挚礼的价值?</view>
      <view class="money_price-bubbles">
        <view
          v-for="(price, index) in prices"
          :key="index"
          class="money_price-bubble"
          :class="{ 'money_price-active': price.isActive }"
          @click="handlePriceClick(index)"
        >
          {{ price.range }}
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      prices: [
        { range: '100元以下', isActive: false },
        { range: '100-200元', isActive: false },
        { range: '200-300元', isActive: false },
        { range: '300-400元', isActive: false },
        { range: '500-800元', isActive: true },
        { range: '800元以上', isActive: false },
      ]
    }
  },
  methods: {
    handlePriceClick(index) {
      this.prices = this.prices.map((price, i) => ({
        ...price,
        isActive: i === index
      }));
    }
  }
}
</script>

<style>
.money_price-container {
  padding: 30rpx;
  background-color: #FBE9E1;
}

.money_price-title {
  text-align: center;
  font-size: 36rpx;
  color: #FF6B35;
  font-weight: bold;
  margin-bottom: 40rpx;
}

.money_price-bubbles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30rpx;
  padding: 0 20rpx;
}

.money_price-bubble {
  height: 140rpx;
  width: 140rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #FFFFFF;
  border-radius: 50%;
  font-size: 28rpx;
  color: #333;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  margin: 0 auto;
}

.money_price-active {
  background: linear-gradient(180deg, #FBEEE5 0%, #E67624 100%);
  color: #FFFFFF;
  transform: scale(1.05);
}

.money_price-bubble:active {
  transform: scale(0.95);
}
</style>
